import React, { PureComponent } from 'react'
import { HomeWrapper, HomeLeft, HomeRight, BackTop} from "./style";
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Writer from './components/Writer'
import axios from 'axios'
import {connect} from "react-redux";
import types from './store/actionTypes'
import { actionCreators } from './store'
class Home extends PureComponent{

  componentDidMount() {
    this.props.changeHomeData()
    window.addEventListener('scroll', this.props.changeScrollTopShow)
  }
  handleScrollTop(){
    window.scrollTo(0,0)
  }

  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className='banner-img' src="https://upload.jianshu.io/admin_banners/web_images/4894/23ecc55accf5c6a6c9910be966c125853d1f04a5.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
          <Topic/>
          <List/>
        </HomeLeft>
        <HomeRight>
          <Recommend/>
          <Writer/>
        </HomeRight>
        {
          this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : ''
        }
      </HomeWrapper>
    )
  }
}
const mapState = state => ({
  showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatch = dispatch => ({
  changeHomeData() {
    const action = actionCreators.getHomeInfo()
    dispatch(action)
  },
  changeScrollTopShow(e) {
    if (document.documentElement.scrollTop >100) {
      dispatch(actionCreators.toggleTopShow(true))
    } else {
      dispatch(actionCreators.toggleTopShow(false))

    }
  }
})
export default connect(mapState, mapDispatch)(Home)
